<template>
  <div class="home">
    <el-container>
      <el-aside width="200px" class="as">
        <div class="bbb">
          <h2>OA</h2>
          <h1>协同办公</h1>
        </div>
        <el-col :span="24">

          <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color=" hsl(258, 92%, 20%)" text-color="white" active-text-color="gray" :unique-opened="true"
            :router="true" :collapse-transition="true">
            <div v-for="item, index in router" :key="index">

              <el-submenu  class="xc" v-for="item2, index2 in item.children" :key="index2" :index="item2.path">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>
                    {{item2.meta.icon}}
                  </span>
                  <span >{{ item2.name }}</span>
                </template>
                <el-menu-item-group class="zx" v-for="item1, index1 in item2.children" :key="index1">
                  <el-menu-item :index="item1.path">{{ item1.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </div>

          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header height="90px">Header</el-header>
        <el-main >
          
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import router from '@/router/index' // 确保路由是从正确的位置导入
console.log(router.options.routes);

export default {
  data() {
    return {
      router:[]
    }
  },
  created() {
    // console.log(this.$route);
    this.router = router.options.routes
    console.log(this.router);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style >
* {
  margin: 0;
  padding: 0;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  height: 100vh;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
}

.bbb {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(32, 4, 99);


}

h2 {
  color: red;
}

h1 {
  color: white;
}

.as {
  background: hsl(258, 92%, 20%);
}

.el-menu {
  background-color: rgba(148, 25, 25, 0.582);
}
.xc{
  margin-left: -80px;
}
.zx{
  margin-left: 60px;
}
</style>
